<template>
  <div class="supplementary-agreement">
    <el-form-item>
      <el-button class="add-agreement-btn" size="small" type="primary" @click="addTab()">新增</el-button>
      <el-tabs v-model="stringifyValue" type="card">
        <el-tab-pane
          class="change-delBtn-color"
          :key="index"
          v-for="(item, index) in agreements"
          :label="`补充协议${index + 1}`"
        >
          <p class="agreement-title">协议内容：</p>
          <el-button class="agreement-del-btn" @click="removeTab(index)">删除</el-button>
          <el-input
            class="agreement-content"
            type="textarea"
            :rows="7"
            placeholder="请输入内容"
            v-model="item.content"
          ></el-input>
        </el-tab-pane>
      </el-tabs>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: 'SupplementaryAgreement',
  data() {
    return {
      agreementValue: 0,
      agreements: [],
    };
  },
  created() {
    this.addTab();
  },
  watch: {
    agreements() {
      this.$emit('change', this.agreements);
    },
  },
  computed: {
    stringifyValue: {
      get() {
        return `${this.agreementValue}`;
      },
      set(newValue) {
        this.agreementValue = Number(newValue);
      },
    },
  },
  methods: {
    /**
     * 添加补充协议
     */
    addTab() {
      const len = this.agreements.push({
        content: '',
      });
      this.agreementValue = len - 1;
    },
    /**
     * 删除tab
     */
    removeTab(index) {
      if (this.agreements.length <= 1) {
        this.$message('补充协议至少保留一个哦');
        return;
      }
      this.$confirm('是否删除选中数据？', '提示', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        type: 'warning',
      })
        .then(() => {
          this.agreements.splice(index, 1);
          this.agreementValue = Math.max(index - 1, 0);
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.el-tabs--card > .el-tabs__header .el-tabs__nav,
.el-tabs__content {
  background: #fff;
}
.el-tabs__content {
  border: 1px solid #e4e7ed;
  border-top: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom-color: #e4e7ed !important;
}
.el-tabs__header {
  margin: 0 !important;
}
.el-textarea__inner {
  background: #f8f8f8 !important;
}
.change-delBtn-color .el-button {
  color: #ffa935 !important;
}
.supplementary-agreement {
  position: relative;
}
.agreement-title {
  padding: 0 20px;
}
.agreement-del-btn {
  float: right;
  margin-top: -55px;
  margin-right: 20px;
}
.agreement-content {
  width: 96%;
  margin-left: 20px;
  margin-bottom: 50px;
}
.add-agreement-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
}
</style>
